/**
* @Author luof
* @Date 2024/4/28 11:04
* @Description:
*/
<template>

  <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
  >
    <el-form-item label="username" prop="username">
      <el-input v-model="ruleForm.username"/>
    </el-form-item>
    <el-form-item label="password" prop="password">
      <el-input v-model="ruleForm.password" show-password/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {ComponentSize, ElMessage, FormInstance, FormRules} from 'element-plus'
import {reqAdminLogin} from '../../api/admin'
import {useRouter} from 'vue-router'
const router=useRouter()
interface RuleForm {
  username: string
  password: string

}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  username: 'admin',
  password: '123456',

})

const locationOptions = ['AdminHome', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
  username: [
    {required: true, message: 'Please input Activity name', trigger: 'blur'},
  ],
  password: [
    {required: true, message: 'Please input Activity name', trigger: 'blur'},
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      handleAdminLogin()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


const handleAdminLogin =  function () {
  try {
    ElMessage.success({showClose:true,message:"ok"})
     router.push({path:"/admin/index"})
    // const {username, password} = ruleForm
    // const res = await reqAdminLogin({
    //   username, password
    // })
    // if (res.data.code === 200) {
    //   localStorage.setItem("token", res.data.data.token)
    //   ElMessage.success(res.data.message)
    //   await router.push({path:"/admin/page"})
    // } else {
    //   ElMessage.error(res.data.message)
    // }
  } catch (error) {
    console.log(error);
  }
}

</script>

<style lang="less" scoped>
.el-form {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 100px auto;

  .el-form-item {
    width: 280px;
  }
}

</style>
